<template>
    <div>
        <h2>
            指令定义函数提供了几个钩子函数（可选）：
        </h2>

        <ul>
            <li v-red>
                bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
            </li>
            <li>
                inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
            </li>
            <li v-red>
                update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
            </li>
            <li>
                componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
            </li>
            <li v-red>
                unbind: 只调用一次， 指令与元素解绑时调用。
            </li>
        </ul>
    </div>
</template>

<script>
    import Vue from 'vue'
    // 注册一个全局自定义指令 v-focus
    Vue.directive('red', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.style.color = '#f40'
        }
    })

    export default {
        name: "directive"
    }
</script>

<style scoped>

</style>
